<template>
  <div class="addHome">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">添加您的新物业</span>
      <span class="header-wrap-right"></span>
    </div>
    <!-- 选择省市区 -->
    <div class="addHome-content" style="padding-top: 1.3rem;">
      <span class="addHome-title">请按照顺序选择您的房屋信息</span>
      <div class="addHome-list" @click='againCity' v-if="address">
        <span>{{ address }}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="addHome-list" @click='againCity' v-else>
        <span>请选择地址</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <!-- 选择小区 -->
    <div class="addHome-content">
      <div class="addHome-list" @click="showResidential" v-if="Residential">
        <span>{{ Residential }}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="addHome-list" @click="showResidential" v-else>
        <span>请选择小区</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <!-- 选择期数 -->
    <div class="addHome-content">
      <div class="addHome-list" @click="showPickerperiod" v-if="period">
        <span>{{ period }}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="addHome-list" @click="showPickerperiod" v-else>
        <span>请选择期数</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <!-- 选择栋数 -->
    <div class="addHome-content">
      <div class="addHome-list" @click="showbuilding" v-if="building">
        <span>{{ building }}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="addHome-list" @click="showbuilding" v-else>
        <span>请选择栋数</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <!-- 选择单元 -->
    <div class="addHome-content">
      <div class="addHome-list" @click="showunit" v-if="unit">
        <span>{{ unit }}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="addHome-list" @click="showunit" v-else>
        <span>请选择单元</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <!-- 选择户型 -->
    <div class="addHome-content">
      <div class="addHome-list" @click="showhouseType" v-if="houseType">
        <span>{{ houseType }}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="addHome-list" @click="showhouseType" v-else>
        <span>请选择户型</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <!-- 选择户主关系 -->
    <div class="addHome-content">
      <div class="addHome-list" @click="showrelationship" v-if="relationship">
        <span>{{ relationship }}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="addHome-list" @click="showrelationship" v-else>
        <span>请选择与户主关系</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <!-- 输入业主电话 -->
    <div class="addHome-content" v-if="relationshipId!=0&&relationshipId!=null">
      <div class="addHome-list">
        <van-field clearable type="Number" v-model="proprietor_mobile" placeholder="请输入业主电话"/>
      </div>
    </div>
    <!-- 输入户号 -->
    <div class="addHome-content">
      <div class="addHome-list">
        <van-field clearable v-model="account_number" placeholder="请输入户号"/>
      </div>
    </div>
    <!-- 确定 -->
    <div class="addHome-content" style="margin-top: .7rem;">
      <div class="submit" @click="addhouse">
        确定
      </div>
    </div>
    <!-- 地址弹窗 -->
    <van-popup v-model="showpopup" position="bottom">
      <div v-show="flag">
        <van-area :area-list="areaList"
                  :visible-item-count=5
                  @confirm="onAddrConfirm"
                  @cancel="cancel"
                  :value="addrCode"/>
      </div>
    </van-popup>
    <!-- 小区弹窗 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker=false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 期数弹窗 -->
    <van-popup v-model="Pickerperiod" position="bottom">
      <van-picker
        show-toolbar
        :columns="periodData"
        @cancel="Pickerperiod=false"
        @confirm="ConfirmPeriod"
      />
    </van-popup>
    <!-- 栋数弹窗 -->
    <van-popup v-model="Pickerbuilding" position="bottom">
      <van-picker
        show-toolbar
        :columns="buildingData"
        @cancel="Pickerbuilding=false"
        @confirm="ConfirmBuilding"
      />
    </van-popup>
    <!-- 单元弹窗 -->
    <van-popup v-model="Pickerunit" position="bottom">
      <van-picker
        show-toolbar
        :columns="unitData"
        @cancel="Pickerunit=false"
        @confirm="ConfirmUnit"
      />
    </van-popup>
    <!-- 户号弹窗 -->
    <van-popup v-model="Pickerhouse" position="bottom">
      <van-picker
        show-toolbar
        :columns="houseTypeData"
        @cancel="Pickerhouse=false"
        @confirm="ConfirmHouse"
      />
    </van-popup>
    <!-- 关系选择弹窗 -->
    <van-popup v-model="Pickerrelationship" position="bottom">
      <van-picker
        show-toolbar
        :columns="relationshipData"
        @cancel="Pickerrelationship=false"
        @confirm="ConfirmRelationship"
      />
    </van-popup>
    <!-- 业主弹窗 -->
    <van-dialog
      title="需要完成业主身份校验"
      v-model="ShowConfirm"
      show-cancel-button
      @cancel="cancelConfirm"
      @confirm="showConfirm"
    >
    </van-dialog>
  </div>
</template>
<script>
import api from '../../api/api.js'
import {Area, Popup, Picker, Dialog, Field} from 'vant';

export default {
  data() {
    return {
      address: '',
      Residential: '',
      period: '',
      building: '',
      unit: '',
      houseType: '',
      relationship: '',
      relationshipId: null,
      account_number: null,
      ShowConfirm: false,
      ResidentialId: null,
      showpopup: false,
      flag: false,
      areaList: null,
      addrCode: '530103',
      province: {},
      city: {},
      county: {},
      showPicker: false,
      Pickerperiod: false,
      Pickerbuilding: false,
      Pickerunit: false,
      Pickerhouse: false,
      Pickerrelationship: false,
      infoData: [],
      columns: [],
      periodData: [],
      buildingData: [],
      unitData: [],
      houseTypeData: [],
      proprietor_mobile: '',
      relationshipData: [
        {text: '业主', value: 0},
        {text: '妻子', value: 1},
        {text: '子女', value: 2},
        {text: '父母', value: 3},
        {text: '兄弟姐妹', value: 4},
        {text: '丈夫', value: 6},
        {text: '其他成员', value: 5}
      ],
      mark: false
    }
  },
  created() {
    this.getarea()
    this.infolist()
    this.menu()
  },
  methods: {
    menu() {
      window.scrollTo(0, 0)
    },
    goback() {
      this.$router.go(-1)
    },
    // 获取省市区
    getarea() {
      this.$jsonp(api.source.areaNumber, {
        callbackName: 'jsonpCallback'
      })
        .then((response) => {
          this.areaList = response
        })
        .catch((error) => {
          console.log(error)
        });
    },
    addhouse() {
      var reg = /^([1][0-9]{10})$/;
      if (!this.address) {
        this.$toast('请选择您的地址')
        return
      }
      if (!this.Residential) {
        this.$toast('请选择您的小区')
        return
      }
      if (!this.relationship) {
        this.$toast('请选择您的业主关系')
        return
      }
      if (!this.proprietor_mobile && this.relationshipId != 0) {
        this.$toast('请输入业主电话')
        return
      }
      if (!reg.test(this.proprietor_mobile) && this.relationshipId != 0) {
        this.$toast("手机格式不正确");
        return
      }
      if (!this.account_number) {
        this.$toast('请输入房屋户号')
        return
      }
      this.$get(api.addhome, {
        params: {
          residential_id: this.ResidentialId,
          period: this.period,
          building: this.building,
          unit: this.unit,
          house_type: this.houseType,
          account_number: this.account_number,
          type: this.relationshipId,
          proprietor_mobile: this.proprietor_mobile ? this.proprietor_mobile : undefined
        }
      })
        .then((response) => {
          if (response.data.code === 1) {
            this.$toast('物业添加完成')
            setTimeout(() => {
              this.$router.push('/myHome')
            }, 1000);
          } else {
            this.$toast(response.data.msg)
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 点击确认，获取所选的省市区数据，确定选择,返回的必定是三元素数组
    onAddrConfirm(value) {
      this.province = value[0].name
      this.city = value[1].name
      this.district = value[2].name
      this.districtId = value[2].code
      this.address = this.province + this.city + this.district
      this.flag = false
      this.marktext = false
      this.marknext = true
      this.showpopup = false
      this.Residential = ''
      this.period = '',
        this.building = '',
        this.unit = '',
        this.houseType = ''
      this.getallResidential()
    },
    // 取消
    cancel() {
      this.showpopup = false,
        this.showPicker = false,
        this.Pickerperiod = false,
        this.Pickerbuilding = false,
        this.Pickerunit = false,
        this.Pickerhouse = false,
        this.Pickerrelationship = false,
        this.flag = false
    },
    // 点击选择按钮，省市区弹窗
    againCity() {
      this.showpopup = true,
        this.flag = true
    },
    // 获取对应区域小区详细信息
    getallResidential() {
      this.$get(api.allResidential, {
        params: {
          area_number: this.districtId,
        }
      })
        .then((response) => {
          this.columns = response.data.data.list
        })
        .catch((error) => {
          console.log(error)
        });
    },
    // 获取期栋单元号
    getPbua() {
      this.$get(api.getPbua, {
        params: {
          residential_id: this.ResidentialId ? this.ResidentialId : undefined,
        }
      })
        .then((response) => {
          if (response.data.code == 1) {
            // 期数
            this.periodData = response.data.data.list.period
            // 栋数
            this.buildingData = response.data.data.list.building
            // 单元
            this.unitData = response.data.data.list.unit
            // 户号
            this.houseTypeData = response.data.data.list.house_type
            if (this.periodData && this.buildingData && this.unitData && this.houseTypeData) {
              this.period = response.data.data.list.period[0].text,
                this.building = response.data.data.list.building[0].text,
                this.unit = response.data.data.list.unit[0].text,
                this.houseType = response.data.data.list.house_type[0].text
            }
          } else {
            this.Residential = '',
              this.period = ''
            this.building = ''
            this.unit = ''
            this.houseType = ''
            this.periodData = []
            this.buildingData = []
            this.unitData = []
            this.houseTypeData = []
            this.$toast(response.data.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        });
    },
    showResidential() {
      if (this.columns.length <= 0) {
        this.showPicker = false
        this.$toast('请先选择城市区域')
      } else {
        this.showPicker = true;
      }
    },
    //小区确定FN
    onConfirm(value) {
      this.Residential = value.text;
      this.ResidentialId = value.residential_id;
      this.showPicker = false;
      this.getPbua()
    },

    showPickerperiod() {
      if (this.periodData.length <= 0) {
        this.Pickerperiod = false
        this.$toast('请先选择小区')
      } else {
        this.Pickerperiod = true;
      }
    },
    // 期数确定FN
    ConfirmPeriod(value) {
      this.period = value.text
      this.Pickerperiod = false;
    },

    showbuilding() {
      if (this.buildingData.length <= 0) {
        this.Pickerbuilding = false
        this.$toast('请先选择小区')
      } else {
        this.Pickerbuilding = true;
      }
    },
    // 栋数确定FN
    ConfirmBuilding(value) {
      this.building = value.text
      this.Pickerbuilding = false;
      this.showResidential2 = false
    },

    showunit() {
      if (this.unitData.length <= 0) {
        this.Pickerunit = false
        this.$toast('请先选择小区')
      } else {
        this.Pickerunit = true;
      }
    },
    // 单元确定FN
    ConfirmUnit(value) {
      this.unit = value.text
      this.Pickerunit = false;
    },

    // 户型确定FN
    showhouseType() {
      if (this.houseTypeData.length <= 0) {
        this.Pickerhouse = false
        this.$toast('请先选择小区')
      } else {
        this.Pickerhouse = true;
      }
    },
    ConfirmHouse(value) {
      this.houseType = value.text
      this.Pickerhouse = false;
    },
    infolist() {
      this.$get(api.info, {})
        .then((response) => {
          if (response.data.code === 1) {
            this.infoData = response.data.data
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 业主关系确定FN
    showrelationship() {
      this.proprietor_mobile = ''
      if (this.periodData.length <= 0) {
        this.Pickerrelationship = false
        this.$toast('请先选择小区')
      } else {
        this.Pickerrelationship = true;
      }
    },
    ConfirmRelationship(value) {
      this.relationship = value.text
      this.relationshipId = value.value
      if (this.relationshipId == 0 && this.infoData.mobiles[0].proven == false) {
        this.ShowConfirm = true
      }
      this.Pickerrelationship = false;
    },
    // 取消弹窗
    cancelConfirm() {
      this.relationship = ''
    },
    // 确认弹窗
    showConfirm() {
      this.$toast('正在跳转业主身份校验,请稍后')
      setTimeout(() => {
        this.$router.push('/verification')
      }, 1000);
    }
  },
  components: {
    [Area.name]: Area,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [Dialog.Component.name]: Dialog.Component
  }
}
</script>
<style>
.addHome .addHome-list .van-cell {
  background: none;
  color: #000;
  line-height: .55rem;
  padding: .24rem .3rem;
}

.addHome .van-field__control {
  font-size: .28rem;
}
</style>

<style scoped>
.van-dialog {
  width: 75%;
}

.addHome-content {
  padding: .35rem .5rem;
  color: #000;
  font-weight: bold;
}

.addHome-title {
  display: block;
  margin-bottom: .2rem;
  font-size: .32rem;
}

.addHome-list {
  background: #fff;
  display: flex;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  border: 0.02rem solid #ddd;
}

.addHome-list span:nth-of-type(1) {
  text-indent: .35rem;
  flex: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.addHome-list span:nth-of-type(2) {
  text-align: center;
  flex: 1;
}

.submit {
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}
</style>


